<script setup>
import { ref } from 'vue';
import ItemBox from "./ItemBox/ItemBox.vue"
// props
const props = defineProps({
    isShowMessage: {
        type: Boolean,
        required: true,
    }
})
const activeKey = ref('1');


</script>
<template>
    <div v-if="props.isShowMessage" class="message-container">
        <div class="message-list">
            <h2 class="color-font">消息列表</h2>
            <div class="select-container">
                <p class="color-font">时间筛选</p>
                <div>
                    <span class="active">全部</span>
                    <span>今日</span>
                    <span>最近三天</span>
                    <span>本周</span>
                    <span>本月</span>
                    <!-- <span class="hide"></span>
                    <span class="hide"></span> -->
                </div>
            </div>
            <div class="select-container">
                <p>消息类型</p>
                <div>
                    <span class="active">全部</span>
                    <span>任务</span>
                    <span>线索</span>
                    <span>客户</span>
                    <span>联系人</span>
                    <span>计划</span>
                </div>
            </div>
        </div>
        <div class="message-show">
            <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane key="1" :tab="`全部(4)`">
                    <div class="all-message list">
                        <ItemBox />
                        <ItemBox />
                        <ItemBox />
                        <ItemBox />
                        <ItemBox />
                        <ItemBox />
                        <ItemBox />
                        <ItemBox />
                        <ItemBox />
                    </div>
                </a-tab-pane>
                <a-tab-pane key="2" :tab="`未读(2)`">Content of tab 2</a-tab-pane>
                <template #rightExtra>
                    <span>全部已读</span>
                </template>
            </a-tabs>

        </div>
    </div>
</template>
<style lang='scss' scoped>
.message-container {
    position: absolute;
    top: 61px;
    right: 257px;
    display: flex;
    width: 55%;
    height: 75%;
    max-height: 678px;
    min-height: 343px;
    max-width: 990px;
    min-width: 754px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .5);
    z-index: 3000;

    .message-list {
        background: var(--fff--363636);
        width: 40%;
        padding: 26px;
        max-width: 300px;
        min-width: 253px;

        h2 {
            font-size: 16px;
            font-weight: bold;
        }

        p {
            font-size: 14px;
            font-weight: 600;
            margin-top: 45px;
        }

        .select-container {

            &>div {
                display: flex;
                flex-wrap: wrap;
                margin-top: 15px;
                --num: 3;
                --itemwidth: 75px;
                --jiange: calc((100% - var(--itemwidth) * var(--num)) / (var(--num) - 1));

                span {

                    display: block;
                    margin: 5px 0;
                    margin-right: var(--jiange);
                    // margin-right:  auto;
                    // margin-right: 17px;
                    font-size: 14px;
                    width: 75px;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    background: var(--grey-EFF2F5);
                    color: var(--grey);
                    border-radius: 19px;
                    opacity: 1;
                    justify-content: space-between;
                    cursor: pointer;

                    &:nth-child(3n) {
                        margin-right: 0;
                    }

                    &.active {
                        background-color: var(--themeColor);
                        color: #fff;
                    }

                    &.hide {
                        opacity: 0;
                    }
                }
            }
        }
    }

    .message-show {
        flex: 1;
        max-width: 690px;
        min-width: 500px;
        background: var(--grey-EFF2F5);
    }
}

.list {
    position: relative;
    overflow: auto;
    --listNum: 6.5;
    max-height: calc(92px * var(--listNum));
    padding-right: 8px;
}

.list::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0) !important;
}

:deep(.ant-tabs-nav) {
    padding: 0 28px;
}

:deep(.ant-tabs-content-holder) {
    padding: 0 28px;
    padding-right: 15px;
}

@media screen and (max-width: 1648px){
    .message-container {
        .message-list {
            h2 {
                font-size: 15px;
            }

            p {
                margin-top: 23px !important;
            }

            .select-container {
                &>div {
                    margin-top: 10px;
                    --itemwidth: 60px;
                    transition: all 1s ease;

                    span {
                        font-size: 11px;
                        width: 60px;
                        height: 25px;
                        line-height: 25px;
                        margin-right: var(--jiange);
                        transition: all 1s ease;
                    }
                }
            }
        }
    }
    .list {
    --listNum: 5.2;
    max-height: calc(92px * var(--listNum));
}
}
</style>